<template>
  <div class="box">
    <div>您的账户为:{{zh<0?0:zh}}</div>
    <div class="overall" v-if="cjshow">
      <div class="zp-box">
        <div class="panzi">
          <div class="bck-box" :style="` transform: rotate(${-90+180/list.length}deg)`">
            <div class="bck" v-for="(i,index) in list" :key="index" :style="`transform: rotate(${-index*360/list.length}deg) skew(${-90 + 360/list.length}deg);`"></div>
          </div>
          <div class="jiang" :style="`transform: rotate(${-index*360/list.length}deg) translateY(-7.5rem);`" v-for="(i,index) in list" :key="index">
            <span class="title">{{i.title}}</span>
            <div class="img">
              <img :src="i.src" alt />
              <!-- img{{index}} -->
            </div>
          </div>
        </div>
        <div class="start-btn" @click="start()">抽奖</div>
      </div>
    </div>
    <div class="lotteryTips" v-if="djshow">
      <div class="cj">
        <div class="name">
          <p>用户信息登记</p>
          <el-divider></el-divider>
          <p style="font-size:12px">恭喜宝儿中奖了,请填写您的姓名和电话,填写完毕后1个工作日内会有相关工作人员联系~~</p>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="region">
            <el-input v-model="ruleForm.region"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    animationClass() {
      //对应css样式中定义的class属性值,如果有更多的话可以继续添加  case 8:   return 'wr8'
      switch (this.winner) {
        case 0:
          return 'wr0'
        case 1:
          return 'wr1'
        case 2:
          return 'wr2'
        case 3:
          return 'wr3'
        case 4:
          return 'wr4'
        case 5:
          return 'wr5'
        case 6:
          return 'wr6'
        case 7:
          return 'wr7'
      }
    }
  },
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5]+$/, message: '姓名只能为中文' }],
        region: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }],
      },
      // 默认显示
      zh: localStorage.getItem('num') || 1000,
      cjshow: true,
      djshow: false,
      goods: 0,
      winner: 2, //指定获奖下标 specified为true时生效
      specified: false, //是否指定获奖结果，false时为随机
      loading: false, //抽奖执行状态，防止用户多次点击
      panziElement: null,
      list: [
        {
          title: 'iPad Pro',
          src: 'https://img11.360buyimg.com/n7/jfs/t1/204340/9/5972/87882/613af824Ebc372d23/cbc32848b517cafb.jpg'
        },
        {
          title: '谢谢惠顾',
          src: 'https://img0.baidu.com/it/u=1611552529,3043771987&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500'
        },
        {
          title: 'iPhone 13',
          src: 'https://img10.360buyimg.com/n7/jfs/t1/193710/2/24942/176414/6286182aEa4449e1d/c2d06e7bb1523ab6.jpg'
        },
        {
          title: '谢谢惠顾',
          src: 'https://img0.baidu.com/it/u=1611552529,3043771987&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500'
        },
        {
          title: '华为笔记本',
          src: 'https://img14.360buyimg.com/n7/jfs/t1/69468/27/17416/141766/626baaecE202ac55d/d65dd608458c8c0b.jpg'
        },
         {
          title: '谢谢惠顾',
          src: 'https://img0.baidu.com/it/u=1611552529,3043771987&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500'
        },
        {
          title: '化妆品',
          src: 'https://img14.360buyimg.com/n7/jfs/t1/199570/11/23722/152057/6281dbe4E79f637a3/d12d64903b5f363d.jpg'
        },       
        {
          title: '谢谢惠顾',
          src: 'https://img0.baidu.com/it/u=1611552529,3043771987&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500'
        }
      ]
    }
  },
  watch: {
    'zh': {
      handler: function (newVal, oldVal) {
        // this.zh=newVal
        if (newVal >= 0) localStorage.setItem('num', newVal)
        // console.log("newVal:", newVal);
        // console.log("oldVal:", oldVal);
      },
    }
  },
  mounted() {
    //通过获取奖品个数，来改变css样式中每个奖品动画的旋转角度
    // var(--nums) 实现css动画根据奖品个数，动态改变
    let root = document.querySelector(':root')
    root.style.setProperty('--nums', this.list.length)
  },

  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.name = ''
          this.ruleForm.region = ''
          this.$message({
            message: '登记成功!',
            type: 'success'
          });
          this.djshow = false
          this.cjshow = true
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //开始抽奖
    start() {
      if (confirm('您是否花费500元进行抽奖')) {
        this.zh = this.zh - 500
        if (this.zh >= 0) {
          if (!this.loading) {
            this.panziElement = document.querySelector('.panzi')
            this.panziElement.classList.remove(this.animationClass)
            if (this.specified) {
              //此处可指定后端返回的指定奖品
              // this.winner = this.winner
              this.winCallback()
            } else {
              
              // 获取下标
              this.winner = this.random(0, this.list.length - 1)
              // 获取抽奖信息
              this.goods = this.list[this.winner].title
              this.winCallback()
            }
            this.loading = true
          }
        } else {
          alert('都没钱了，穷逼')
        }
      }
    },
    //中奖返回方法
    winCallback() {
      setTimeout(() => {
        /* 此处是为了解决当下次抽中的奖励与这次相同，动画不重新执行的 */
        /* 添加一个定时器，是为了解决动画属性的替换效果，实现动画的重新执行 */
        this.panziElement.classList.add(this.animationClass)
      }, 0)
      // 因为动画时间为 3s ，所以这里3s后获取结果，其实结果早就定下了，只是何时显示，告诉用户
      setTimeout(() => {
        this.loading = false
        if (this.goods == '谢谢惠顾') {
          this.$message({
            message: '下次继续',
            type: 'success'
          });
        } else {
          this.$message({
            message: `恭喜你获得了${this.goods}`,
            type: 'success'
          });
          this.djshow = true
          this.cjshow = false
        }
      }, 3000)
    },
    //随机一个整数的方法
    random(min, max) {
      return parseInt(Math.random() * (max - min + 1) + min)
    }
  }
}
</script>
<style lang="scss" scoped>
// 自定义颜色
$c1:#f53737;
.box {
  display: flex;
  .overall,
  .lotteryTips {
    margin: 50px auto;
  }
  .lotteryTips {
    width: 350px;

    border-radius: 10px;
    border: 1px solid blue;
    display: flex;
    .cj {
      margin: 0 auto;
      margin-right: 40px;
      margin-top: 10px;
    }
    .name {
      text-align: center;
      padding-left: 40px;
      margin-bottom: 10px;
      color: #f8a281;
    }
  }
}
// 自定义尺寸
$zp_size: 23rem; //转盘尺寸
$btn_size: 7rem; //抽奖按钮尺寸
$time: 3s; //转动多少秒后停下的时间
.zp-box {
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: $zp_size;
  height: $zp_size;
  /* 抽奖按钮 */
  .start-btn {
    display: inline-block;
    background: $c1;
    position: relative;
    z-index: 2;
    cursor: pointer;
    width: $btn_size;
    height: $btn_size;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    // &符号表示父级元素
    &::before {
      content: "";
      width: 0;
      height: 0;
      border: 2rem solid transparent;
      border-top: 3rem solid transparent;
      border-bottom: 3rem solid $c1;
      position: absolute;
      top: -5rem;
      z-index: -1;
    }
  }
  /* 盘子样式 */
  .panzi {
    overflow: hidden;
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #f74e4e;
    box-sizing: border-box;
    /* 每个奖项的样式 */
    .jiang {
      position: absolute;
      .title {
        font-weight: bold;
        font-size: 18px;
        color: #3b3b3b;
      }
      .img {
        margin: 0.5rem auto;
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        border: 2px dashed #f87373;
        overflow: hidden;
        color: white;
        img {
          height: 100%;
        }
      }
    }
  }
  .bck-box {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    // background: blue;
    border-radius: 50%;

    /* 转盘扇形背景 */
    .bck {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 1;
      top: -50%;
      left: 50%;
      transform-origin: 0% 100%;
      // transform:skew(30deg);
    }
    /* 转盘背景色 */
    .bck:nth-child(2n) {
      background: #fffcb9;
    }
    .bck:nth-child(2n + 1) {
      background: #f8a281;
      box-shadow: 0 0 5px red;
    }
  }

  /* 下面的css样式为每个奖品的旋转动画，这里写了对应8个奖品的动画，如果想要更多的话，可以添加 */
  /* 例如： .wr8  @keyframes play8 */
  .wr0,
  .wr1,
  .wr2,
  .wr3,
  .wr4,
  .wr5,
  .wr6,
  .wr7 {
    animation-duration: $time;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-iteration-count: 1;
  }
  .wr0 {
    animation-name: play0;
  }
  .wr1 {
    animation-name: play1;
  }
  .wr2 {
    animation-name: play2;
  }
  .wr3 {
    animation-name: play3;
  }
  .wr4 {
    animation-name: play4;
  }
  .wr5 {
    animation-name: play5;
  }
  .wr6 {
    animation-name: play6;
  }
  .wr7 {
    animation-name: play7;
  }
  @keyframes play0 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 0));
    }
  }
  @keyframes play1 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 1));
    }
  }
  @keyframes play2 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 2));
    }
  }
  @keyframes play3 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 3));
    }
  }
  @keyframes play4 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 4));
    }
  }
  @keyframes play5 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 5));
    }
  }
  @keyframes play6 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 6));
    }
  }
  @keyframes play7 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 7));
    }
  }
}
</style>